/**
 * Content
 */
 
 import React, {Component} from 'react';
 import { connect } from 'dva';
 import classnames from 'classnames';
 import { bindActionCreators } from 'redux';
 import widgetsActions from '../../../../actions/Editor/widgets';
 import editorActions from '../../../../actions/Editor/editor';
 import timelinesActions from '../../../../actions/Editor/timelines';
 var Call = require("./event/Call");
 var Website = require("./event/Website");
 var Download = require("./event/Download");
 var Introduce = require("./event/Introduce");
 var Location = require("./event/Location");
 var PlayVideo = require("./event/PlayVideo");
 var Pagejump = require("./event/Pagejump");
 var SubmitForm = require("./event/SubmitForm");
 var SearchNearBy = require("./event/SearchNearBy");
 var Share = require("./event/Share");
 var Album = require("./material/Album");
 var Image = require("./material/Image");
 var Model = require("./material/Model");
 var Music = require("./material/Music");
 var Video = require("./material/Video");
 var Fixedbtn = require("./material/Fixedbtn");
 var Text = require("./material/Text");
 var consts = require("../../../../consts/consts");
 var Content = React.createClass({
    getInitialProps: function (){
        return {
            activeTab: "",
            widgets: [],
            root: {},
            timelines: {}
        }
    },
    componentWillMount: function (){
        this.items = {
            album: Album,
            image: Image,
            model: Model,
            music: Music,
            video: Video,
            download: Download,
            fixedbtn: Fixedbtn,
            text:Text,
        };

        this.events = {
            call: Call,
            website: Website,
            location: Location,
            introduce: Introduce,
            playVideo: PlayVideo,
            pagejump: Pagejump,
            form: SubmitForm,
            nearby: SearchNearBy,
            share:Share,
        };
    },
    createTarget: function (data, type, set){
        const {selectedWidgetId,timelines,pages,setState,updateWidget,updateTimeline} = this.props;
        var resource = set[type];
        if (resource){
            var item = React.createElement(
                resource,
                {
                    key:  data.id,
                    data: data,
                    type: type,
                    timelines: timelines,
                    pages: pages,
                    setState: setState,
                    updateWidget: updateWidget,
                    updateTimeline: updateTimeline,
                    selectedWidgetId: selectedWidgetId,
                    selectContents: this.selectContents
                }
            );
            return item;
        }
        return "";
    },
    getContentItem: function (data){
        var type = consts.TEMPLATE_TYPE[data.type];
        return type ? this.createTarget(data, type, this.items) : "";
    },
    getEventItem: function (data){
        var templateType = consts.TEMPLATE_TYPE[data.type];
        if (templateType !== "fixedbtn" && templateType != "text" && templateType !='image'){
            var type = consts.WIDGET_EVENTS_MAPPING[data.action.type];
            return type ? this.createTarget(data, type, this.events) : "";
        }
        return "";
    },
    selectContents: function(data){
        const{setState} = this.props;
        setState({selectedWidget: data,selectedWidgetId: data.widget_id});
    },
    render: function (){
        let activeTab = this.props.activeTab;
        const {widgets} = this.props;
        return (
            <div className="template-content-region" style={{display:(activeTab == "content" ? "block" : "none")}}>
            {
                widgets.map(function (widget){
                    if　(widget.tem_widget_change){
                        return (
                            this.getContentItem(widget)
                        )
                    }
                }.bind(this))
            }
            {
                widgets.map(function (widget){
                    if　(widget.tem_widget_change){
                        return (
                            this.getEventItem(widget)
                        )
                    }
                }.bind(this))
            }
            </div>
        )
    }
 });
 
 const mapStateToProps = ({ editor, widgets, timelines ,pages, pageJump}) => {
    const pageId = editor.selectedPageId;
    return {
      selectedWidgetId: editor.selectedWidgetId,
      widgets: widgets.filter(w => w.page_id === pageId),
      timelines: timelines.filter(t => t.page_id === pageId),
      page: pages.filter(p => p.page_id === pageId)[0],
      pages,
      pageJump,
      selectedPageId: pageId
    };
};

 const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({...widgetsActions,...editorActions,...timelinesActions}, dispatch);
 };


 export default connect(mapStateToProps, mapDispatchToProps)(Content);
